<template>
  <div class="tab-bar">
    <slot></slot>

  </div>
</template>

<script setup>
// import useChildren from '@/hooks/useChildren'
// const {linkChildren} = useChildren('TabBar')
import { provide } from 'vue'
// const props = defineProps({
//     modelValue:{
//         type:Number,
//     },
// })
// //触发事件
// const emit = defineEmits(['update:modelValue'])

const model = defineModel()  //默认接收的是modelValue,相当于props和emit
// const abc = defineModel('abc')  //接收abc
provide('tabBar', {
  children: [],
  model: model,
  setActive(index) {
    model.value = index
  },
})


</script>

<style scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 40px;
  background-color: skyblue;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
}

</style>